<template>
	<view>
		<!-- 充值 -->
		<view class="grid-box">
			<view class="head-title u-m-b-30"><text>充值</text></view>
			<view>
				<u-form label-width="150rpx">
					<u-form-item label="充值方式" prop="accountid" required>
						<u-input v-model="selectAccount" type="select" :border="true" @click="showAccount = true" />
						<u-select v-model="showAccount" :list="options" label-name="name" value-name="id" @confirm="confirmAccount"></u-select>
					</u-form-item>
					<u-form-item label="充值金额" prop="amount" required>
						<u-input placeholder="请输入充值金额" type="number" inputmode="decimal" border v-model="recharge.amount"/>
					</u-form-item>
					<u-form-item label="充值时间" prop="arrivaldate" required>
						<u-input v-model="recharge.arrivaldate" type="select" :border="true" @click="showArrivaldate = true" />
						<u-picker v-model="showArrivaldate" mode="time" :params="params" @confirm="confirmArrivaldate"></u-picker>
					</u-form-item>
					<u-form-item label="汇款单号" prop="transactionid" required v-if="recharge.type == '银行账户'">
						<u-input placeholder="请输入充值金额" type="text" border v-model="recharge.transactionid"/>
					</u-form-item>
					<u-form-item label="上传凭证" required v-if="recharge.type == '银行账户'">
						<common-upload max-count="1" @on-success="receipUploadSuccess" @on-remove="receipRemovePhoto"></common-upload>
					</u-form-item>
				</u-form>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom-box">
			<view class="fixed-container">
				<view class="btn-group">
					<view class="u-flex">
						<view class="u-p-r-30 u-text-right">
							<text class="u-color-main" style="text-decoration: underline;" @click="back">取消</text>
						</view>
						<view class="u-flex-1">
							<u-button type="primary" @click="confirmRecharge">提交</u-button>
						</view>
					</view>
				</view>
			</view>
			<view class="fixed-placeholder"></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex';
		
	export default {
		data() {
			return {
				recharge: {
					id: 0,
					amount: null,
					accountid: 0,
					remark: '',
					arrivaldate: '',
					proves: '',
					type: "", //充值方式类型
					transactionid: '', //汇款单号
				},
				// 汇款账户
				selectAccount: '',
				showAccount: false,
				// 到账时间
				showArrivaldate: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false,
					// 选择时间的时间戳
					timestamp: true,
				},
				options: []
			}
		},
		computed: {
			...mapState({
				header: state => state.Authorization
			})
		},
		mounted() {
			this.getAccountList()
		},
		onLoad(opt) {
			this.recharge.id = opt.id
			
		},
		methods: {
			// 到账时间
			confirmArrivaldate(e){
				console.log(e)
				this.recharge.arrivaldate = this.$u.timeFormat(e.timestamp, 'yyyy-mm-dd hh:MM');
			},
			// 选择汇款账户
			confirmAccount(e){
				console.log(e)
				this.recharge.accountid = e[0].value
				this.recharge.type = this.options.find((item)=>item.id == e[0].value).type
				this.selectAccount = e[0].label
			},
			// 上传回调
			receipUploadSuccess(data, index, lists, name) {
				// console.log(data, index, lists, name)
				this.recharge.proves = data.datas.path
			},
			// 删除回调
			receipRemovePhoto(index, lists, name) {
				// console.log(index, lists, name)
				this.recharge.proves = ""
			},
			uploadError(data, index, lists, name) {
				uni.showToast({
					title: '提交失败，请重试'
				})
			},
			back(){
				uni.navigateBack()
			},
			// 汇款账户
			getAccountList() {
				this.$u.post('/Operator/Account/List', {
					"Key": ''
				}).then((res) => {
					let data = res
					data.forEach((item)=>{
						item.name = `[${item.type}]${item.bankaccount}`
					})
					this.options = data.filter((item)=>item.state == '已启用')
				})
			},
			// 充值
			confirmRecharge(){
				// 必填验证
				if(this.$u.test.isEmpty(this.recharge.amount)){
					uni.showToast({
						icon: 'none',
						title: '请填写充值金额'
					})
					return
				}
				if(this.$u.test.isEmpty(this.recharge.accountid)){
					uni.showToast({
						icon: 'none',
						title: '请选择汇款账户'
					})
					return
				}
				if(this.$u.test.isEmpty(this.recharge.arrivaldate)){
					uni.showToast({
						icon: 'none',
						title: '请选择汇款时间'
					})
					return
				}
				// if(this.$u.test.isEmpty(this.recharge.proves)){
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请上传凭证'
				// 	})
				// 	return
				// }
				// 提交新建类型
				let param = {
					amount: this.recharge.amount,
					// remarks: this.recharge.remark,
					accountid : this.recharge.accountid,
					arrivaldate : this.recharge.arrivaldate,
					proves : this.recharge.proves,
					franchiseId: this.recharge.id
				}
				console.log('param',param)
				this.$u.post('/Franchise/Recharge/Create',param).then((res)=>{
					uni.showModal({
						content: '操作成功',
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								this.back()
							}
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottom-box {
		height: 140rpx;
	
		.fixed-container {
			position: fixed;
			bottom: 0;
			background-color: #fff;
			width: 750rpx;
			padding-top: 0;
			// height: 128rpx;
			z-index: 9;
			box-shadow: 0 0 16rpx #e7e7e7;
		}
	
		.fixed-placeholder {
			height: 100%;
			width: 750rpx;
			margin-top: 30rpx;
		}
	
		.total {
			line-height: 80rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			margin: 0;
		}
	
		.btn-group {
			padding: 30rpx;
		}
	}
</style>
